<template>
  <view class="scanner-container">
    <!-- 扫码动画容器 -->
    <view class="scanner-animation">
      <!-- 扫描框 -->
      <view class="scan-frame">
        <!-- 扫描线 -->
        <view class="scan-line"></view>
        <!-- 四角装饰 -->
        <view class="corner top-left"></view>
        <view class="corner top-right"></view>
        <view class="corner bottom-left"></view>
        <view class="corner bottom-right"></view>
      </view>
      <!-- 提示文字 -->
      <view class="scan-tip">请对准幼鹅编号二维码</view>
    </view>
  </view>
</template>

<script setup>

</script>

<style scoped>
.scanner-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
}
/* 扫码动画 */
.scanner-animation {
  position: relative;
  width: 500rpx;
  height: 500rpx;
}

.scan-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border: 4rpx solid #00ff00;
  box-shadow: 0 0 30rpx rgba(0, 255, 0, 0.3);
  overflow: hidden;
}

.scan-line {
  position: absolute;
  width: 100%;
  height: 4rpx;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #00ff00 50%,
    transparent 100%
  );
  animation: scan 2s infinite linear;
}

@keyframes scan {
  0% { top: -10%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* 四角装饰 */
.corner {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  border-color: #00ff00;
  border-style: solid;
}

.top-left {
  top: -4rpx;
  left: -4rpx;
  border-width: 6rpx 0 0 6rpx;
}

.top-right {
  top: -4rpx;
  right: -4rpx;
  border-width: 6rpx 6rpx 0 0;
}

.bottom-left {
  bottom: -4rpx;
  left: -4rpx;
  border-width: 0 0 6rpx 6rpx;
}

.bottom-right {
  bottom: -4rpx;
  right: -4rpx;
  border-width: 0 6rpx 6rpx 0;
}

.scan-tip {
  position: absolute;
  bottom: -80rpx;
  width: 100%;
  text-align: center;
  color: #00ff00;
  font-size: 28rpx;
  text-shadow: 0 0 20rpx rgba(0, 255, 0, 0.5);
  animation: tipFade 2s infinite;
}

@keyframes tipFade {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}
</style>